<html>
<head>
  <title>Parametrized dialog</title>
  <style>
    html 
    { 
      font:system;
      width:max-content; 
      height:max-content; 
      overflow:hidden; 
    }

    //html:visited { background:gold; }
    
    form { flow: row(label,input select); border-spacing: 4dip; }
    form > label { white-space:nowrap; text-align:right; vertical-align:baseline; }
    
  </style>
  <script type="text/tiscript">
  
    event click $(#close-dialog) { view.close( $(form).value ); }
    event change $(form) { stdout.printf("value=%V\n",$(form).value); }

    //event mousemove {
    //  self.state.visited = !self.state.visited;
    //}
    
    // fill data fields from passed parameters.
    // 'parameters' variable passed by dialog function.
    $(form).value = view.parameters;

    </script>
</head>
<body>
<h1>Sample dialog</h1>
<p>Field values below were passed to the dialog<br>through <var>view.parameters</var> object(map).</p>
<form>
  <label>One (Ctrl+1):</label><input type="text" name="one" accesskey="^1" />
  <label>Two (Ctrl+2):</label><input type="text" name="two" accesskey="^2" />
  <label>Three (Ctrl+3):</label><input type="date" value="today" accesskey="^3" /> 
  <label>Four (Ctrl+4):</label><select|dropdown(tplacement) accesskey="^4">
                                <option value="top">at top</option>  
                                <option value="bottom">at bottom</option>
                                <option value="hide" selected>hide</option>  
                              </select>  
</form>
Animation test <img src="sciter:busy.png">
<p style="text-align:center">
<button id="close-dialog" role="default-button">Close Dialog and return value</button>
</p>
</body>
</html>
